<template>
  <view class="cu-filter-time-container">
    <view class="title">时间区间</view>
    <uni-datetime-picker preload v-model="dateArr" type="daterange" @change="changeHandle">
      <view class="filter-time">
        <view class="time-wrap" :class="{ placeholder: !dateArr[0] }">{{ dateArr[0] ? dateArr[0] : '年/月/日' }}</view>
        <view>-</view>
        <view class="time-wrap" :class="{ placeholder: !dateArr[1] }">{{ dateArr[1] ? dateArr[1] : '年/月/日' }}</view>
      </view>
    </uni-datetime-picker>
  </view>
</template>

<script>
import { getDicts } from '@/api/system/dict.js'
export default {
  name: 'CuFilterList',
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    value: {
      type: Array
    }
  },
  watch: {
    value: {
      async handler(val) {
        if (val) {
          if (val == this.dateArr) return
          this.dateArr = val
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      // 选中的元素
      dateArr: [],
      show: false
    }
  },
  methods: {
    changeHandle(val) {
      this.$emit('update:value', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.cu-filter-time-container {
  padding: 40rpx 30rpx;

  .title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    padding: 0 0 20rpx 0;
  }

  ::v-deep .filter-time {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .time-wrap {
      width: 282rpx;
      line-height: 56rpx;
      background: #f8f8f8;
      border-radius: 28rpx;
      font-size: 24rpx;
      padding: 0 30rpx;
      &.placeholder {
        color: #bbbbbb;
      }
    }
  }
}
</style>
